<template>
	<view class="publish">
		<form @submit="" @reset="">
			<ul class="p-detail publish-item">
				<li>
					<view>招聘类型</view>
					<radio-group name="radio">
						<label class="radio">
							<radio value="r1" checked="true" />
							全职
						</label>
						<label class="radio">
							<radio value="r2" />
							兼职
						</label>
					</radio-group>
				</li>
				<!-- input框 -->
				<li v-for="(item, index) in inputList" :key="index">
					<view>{{ item.itype }}</view>
					<input type="text" :placeholder="item.iplaceholder" v-model="item.inputValue" />
				</li>
			</ul>
			<view class="p-descript publish-item">
				<textarea name="" placeholder="输入你的职业描述" maxlength="540"></textarea>
			</view>
			<view class="p-request publish-item">
				<view class="hd">要求</view>
				<ul class="bd">
					<li>
						<view>性别要求</view>
						<radio-group name="radio1">
							<label class="radio">
								<radio value="boy" checked="true" />
								男
							</label>
							<label class="radio">
								<radio value="girl" />
								女
							</label>
						</radio-group>
					</li>
					<!-- 下拉框 -->
					<li v-for="(item,index) in selectList" :key="index">
						<view>{{item.stype}}</view>
						<view class="sel-item">
							<uni-data-select v-model="item.svalue" :localdata="item.srange" @change=""></uni-data-select>
						</view>
					</li>
				</ul>
			</view>
			<button form-type="submit" class="btn-publish">立即发布</button>
			<button type="default" form-type="reset" class="btn-reset">重置</button>
			<view class="space"></view>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// input框
			inputList: [
				{ itype: '招聘类型', iplaceholder: '请输入招聘岗位', inputValue: '' },
				{ itype: '薪资待遇', iplaceholder: '请输入薪资待遇', inputValue: '' },
				{ itype: '招聘人数', iplaceholder: '请输入招聘人数', inputValue: '' },
				{ itype: '工作地址', iplaceholder: '请输入工作地址', inputValue: '' },
				{ itype: '企业名称', iplaceholder: '请输入企业名称', inputValue: '' },
				{ itype: '联系电话', iplaceholder: '请输入联系电话', inputValue: '' }
			],
			// 下拉框
			selectList: [
				{
					stype: '学历要求',
					svalue: '',
					srange: [
						{ value: 0, text: '0' },
						{ value: 1, text: '1' },
						{ value: 2, text: '2' }
					]
				},
				{
					stype: '工作经验',
					svalue: '',
					srange: [
						{ value: 0, text: '0' },
						{ value: 1, text: '1' },
						{ value: 2, text: '2' }
					]
				},
				{
					stype: '年龄要求',
					svalue: '',
					srange: [
						{ value: 0, text: '0' },
						{ value: 1, text: '1' },
						{ value: 2, text: '2' }
					]
				}
			],
			valueRequest: '',
			rangeRequest: [
				{ value: 0, text: '0' },
				{ value: 1, text: '1' },
				{ value: 2, text: '2' }
			]
		};
	}
};
</script>

<style lang="scss">
.publish {
	margin: 54rpx;
	.publish-item {
		border-radius: 24rpx;
		box-shadow: 0px 0px 14rpx #ccc;
		padding: 40rpx;
		margin-bottom: 40rpx;
		li {
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;
			font-size: 32rpx;
			&:last-child {
				margin-bottom: 0;
			}
			view:nth-child(1) {
				margin-right: 30rpx;
			}
			input:nth-child(2) {
				flex: 1;
				border-bottom: 2rpx solid #bbbbbb;
				padding: 10rpx 0;
				font-size: 32rpx;
			}
			radio-group {
				flex: 1;
				display: flex;
				radio {
					margin-left: 40rpx;
				}
				label {
					display: flex;
					align-items: center;
				}
			}
		}
	}
}

.p-descript {
	textarea {
		resize: none;
		height: 500rpx;
		width: 100%;
	}
}
.p-request {
	margin-bottom: 100rpx !important;
	.hd {
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 30rpx;
	}
	.bd {
		li {
			margin-bottom: 60rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
		.sel-item {
			flex: 1;
			&::v-deep .uni-select__input-text {
				font-size: 32rpx !important;
			}
		}
	}
}
.btn-publish,
.btn-reset {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #00dcb6;
	border: 0;
	font-size: 30rpx;
	color: white;
	margin: 40rpx 0;
}
.btn-reset {
	// border: 2rpx solid #00dcb6;
	background-color: white;
	color: #00dcb6 !important;
}
.space {
	padding-bottom: 60rpx;
}
</style>
